<template>
  <div class="box">
    <TopSearch
      @searchHeader="searchHeader"
      @delsHeader="delsHeader"
      @addHeader="addHeader"
      :control="control"
      :controlPosition="[]"
      :positionName="''"
      :disabled="disabled"
      :delsable="delsable"
      :searchConfig="setFormConfig"
    > 
     <template #add ><el-button @click="addHeader" v-permission="'warehousing/create'" color="#50BC58"  icon="Plus" circle class="ml-4 button"></el-button></template>
     </TopSearch>
    <ProTable
      class="protable"
      :data="tableData"
      :page="page"
      :column="column"
      :rowControl="[]"
      :elProps="elProps"
      :disabled="disabled"
      :controlWidth="controlWidth"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
      
    >
                  <template #expand>
                      <el-table-column  type="expand">
                          <template #default="scope">
                                <el-table border size="small" :data="scope.row.detail">
                                  <el-table-column prop="name" align="center" :show-overflow-tooltip="true" label="產品名稱"></el-table-column>
                                  <el-table-column prop="num" align="center" :show-overflow-tooltip="true" label="入倉數量"></el-table-column>
                                  <el-table-column prop="number" align="center" :show-overflow-tooltip="true" label="產品編號"></el-table-column>
                                  <el-table-column prop="price" align="center" :show-overflow-tooltip="true" label="入倉金額"></el-table-column>
                                  <el-table-column prop="remark" align="center" :show-overflow-tooltip="true" label="入倉名稱"></el-table-column>
                                </el-table>
                          </template>
                        </el-table-column>
              </template>
      <template #default="{ row, propname }">
        <div  v-if="propname === 'supplier'">{{row[propname]?.name}}</div>
      </template>
        <template #search_operate>
            <el-table-column  fixed="right" width="200px" label="操作">
              <template #default="scope">
               <div class="flex justify-around">
                <el-link v-permission="'warehousing/update'" type="primary" :underline="false"  @click="collection(scope.row,scope.$index, )" >編輯</el-link >
                <el-link v-permission="'warehousing/delete'" type="primary" :underline="false"  @click="remove(scope.row,scope.$index, )" >刪除</el-link >
                <el-link v-permission="'warehousing/print'" type="primary" :underline="false"  @click="print(scope.row,scope.$index, )" >打印</el-link >
               </div>
              </template>
            </el-table-column>
        </template>
    </ProTable>
    <add :echo="echo" ref="addRef" @update="addTableList"></add>
    <edit :echo="echo" ref="editRef" @update="addTableList"></edit>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted } from "vue"
import { elProps,controlWidth } from "./index.js"
import { setFormConfig } from "./formConfig";
import add from './addEdit/index.vue'
import edit from './addEdit/edit/edit.vue'
 import {warehousing,delWarehousing} from '@/http/index.js'
 import {messageBox,message,loading,closeLoading} from '@/common/function.js'
import {useRouter} from 'vue-router'
 const echo = ref({})

// 分页数据（不给就没有分页）
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 10, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
// 字段名对应表头
const column = {
  name: "倉庫名稱",
  number: "入倉編號",
  create_time:'發佈日期',
  supplier:'供應商',
  remark:'備註',
};
// 表格顶部操作按钮
const control = ["search", "dels"];

// 未选中数据是 禁用项
const disabled = ["dels"];
const delsable = ref(true);

const searchHeader = (e) => {
    Object.assign(obj, e);
      tableList();
};
const addRef = ref(null);
const addHeader = async() => {
  echo.value ={
    supplier_id:'',
    remark:'',
    data:[]
  }
  addRef.value.dialogValue = true
};

const editRef = ref('')
const collection =(row)=>{
  console.log(row);
  editRef.value.dialogValue = true
   const {id,create_time,name,supplier_id,supplier,school_id,detail,remark} = row
   echo.value = {id,create_time,name,supplier_id,supplier,school_id,remark}
   echo.value.product = detail
}
const remove = (row)=>{
    messageBox().then(()=>{
    delTableList(row.id)
  })

}
const router = useRouter()
const print = (val)=>{
  console.log(val);
        let {
          href
        } = router.resolve({
          path: `/warehousingPrint`,
          query:{
            data:JSON.stringify(val),
            username:localStorage.getItem('username')
            }
        })
        window.open(href, '', 'height=500,width=800,top=300,left=800')
}

const delTableList = async(id)=>{
        const data = await delWarehousing(id) 
          if (data.code  == 200) {
              tableList()
              message('已成功刪除仓库数据')
          }else{
              message('刪除仓库数据失敗')
          }
}
/** 多选
 * @selected {Array} 被选中的行
 */
const ids = ref('')
const onSelectionChange = (e) => {
    let row_id = []
  e.forEach(e => {
    row_id.push(e.id)
  });
  ids.value = row_id.toString()
  delsable.value = e.length === 0;
};
const delsHeader = () => {
  messageBox().then(()=>{
    delTableList(ids.value)
  })
};
/**
 * @e {number} 分页操作后的值（当前页|改变后的每页条数）
 * @type {string} <current|size> 分页操作类型（当前页改变|每页条数改变）
 */
const onPageChange = async({ e, type }) => {
  if (type == "current") {
    obj.page = e
  }
  if (type == "size") {
     obj.page = 1
    obj.limit = e
  }
  await tableList()
};


const obj = reactive({
  school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  status:1,
  name: "",
  time: "",
});
const tableData = ref([])
const tableList = async ()=>{
  loading()
  const data = await warehousing(obj)
  console.log(data);
  if (data.code == 200) {
    page.current_page = data.data.current_page
    page.per_page = data.data.per_page
    page.total = data.data.total
    tableData.value = data.data.data
  }
  closeLoading()
}
const addTableList = async()=>{
  await tableList()
}
const pageRefresh = async()=>{
  await tableList()
}
onMounted(() => {
  tableList()
})
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.box {
  padding: 16px 33px;
}
.button{
  color: #fff;
}
</style>